<template>
    <div class="pl13-pt13">
        <header class="mt50">
            <p class="f16">小钻风(Smore)</p>
            <p class="tr f13">尚未开通</p>
        </header>
        <section class="mt20">
            <ul>
                <li v-for="items in vipStatus" :key="items.index">
                    <p class="f14">{{items.name}}</p>
                    <p class="f18 tr"><span class="f20">{{items.prices}}</span><span class="f12" style="vertical-align: text-top;">￥</span>/年</p>
                    <i class="iconfont ml10" style="color: #41B962" v-if="selectAddress === items.id">&#xe661;</i>
                    <i v-else class="iconfont ml10" :id="items.id" @click="selectClass(items.id)">&#xe692;</i>
                </li>
            </ul>
            <i-button long="true" type="success" shape="circle" class="mt15">立即充值</i-button>
        </section>
        <div class="vip-alter">
          <header>
            <span style="border-top-right-radius: 10px; border-bottom-right-radius: 10px"></span>
            <article id="select-vip">
              <!--<aside>
                <a @click="vipselect = 1" :class="{select: 1 === vipselect}" style="border-right: 1px solid #ededed;">
                  <p>普通vip</p>
                  <span></span>
                </a>
                <a @click="vipselect = 2" :class="{select: 2 === vipselect}">
                  <p>高级vip</p>
                  <span></span>
                </a>
              </aside>-->
            </article>
            <span style="border-top-left-radius: 10px; border-bottom-left-radius: 10px"></span>
          </header>
          <!--<ul v-if="selectAddress === 1" class="mt30">
            <li>
              <i class="f20 iconfont">&#xe68e;</i>
              <p>
                <span class="f16" style="color: #747474">免运费</span>
                <span class="f12" style="color: #AEAEAE">每年<span class="privilege">100</span>单内可<span class="privilege">免</span>配送运费</span>
              </p>
            </li>
            <li>
              <i class="f20 iconfont">&#xe690;</i>
              <p>
                <span class="f16" style="color: #747474">会员折扣</span>
                <span class="f12" style="color: #AEAEAE"><span class="privilege">{{suerOrder.name}}</span>可享所有商品<span class="privilege">{{suerOrder.privilege}}</span>折优惠</span>
              </p>
            </li>
            <li>
              <i class="f20 iconfont">&#xe68f;</i>
              <p>
                <span class="f16" style="color: #747474">优先配送</span>
                <span class="f12" style="color: #AEAEAE">享有商品<span class="privilege">优先</span>配送权益</span>
              </p>
            </li>
          </ul>-->
          <ul class="mt30">
            <li>
              <i class="f20 iconfont">&#xe68e;</i>
              <p>
                <span class="f16" style="color: #747474">免运费</span>
                <span class="f12" style="color: #AEAEAE">每年<span class="privilege">100</span>单内可<span class="privilege">免</span>配送运费</span>
              </p>
            </li>
            <li>
              <i class="f20 iconfont">&#xe690;</i>
              <p>
                <span class="f16" style="color: #747474">会员折扣</span>
                <span class="f12" style="color: #AEAEAE"><span class="privilege">{{sureOrder.name}}</span>可享所有商品<span class="privilege">{{sureOrder.privilege}}</span>折优惠</span>
              </p>
            </li>
            <li>
              <i class="f20 iconfont">&#xe68f;</i>
              <p>
                <span class="f16" style="color: #747474">优先配送</span>
                <span class="f12" style="color: #AEAEAE">享有商品<span class="privilege">优先</span>配送权益</span>
              </p>
            </li>
          </ul>
        </div>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'vip-cost',
        data () {
            return {
                selectAddress: 1,
                vipStatus: [
                    {id: 1, name: 'VIP会员', prices: 88, privilege: '9.80'},
                    {id: 2, name: '高级VIP', prices: 188, privilege: '9.60'}
                ],
               sureOrder: {id: 1, name: 'VIP会员', prices: 88, privilege: '9.80'}
            };
        },
        methods: {
          selectClass (id) {
            this.selectAddress = id;
            this.sureOrder = this.vipStatus[id-1];
          }
        }
    };
</script>

<style lang="stylus" scoped>
    header
      display flex;
      p
       flex 1;
    section
       min-height  100px; padding  0 15px; border-radius 5px 5px 0 0;background #fff;
       ul
        li
         display flex; align-items center; height 65px; border-bottom: 1px solid #EFEFEF;
         p
          flex 1;
          span
            color #F54727;
         input
           display: none;
         label:active
           background: transparent;
         label:after
           content: '';/*必须设置*/
         input:checked+label:after
           content: '';color #41B962
        li:last-of-type
          border-color transparent;
      .mint-button--primary
        border-radius 20px;background #41B962;
      .mint-button::after
        background transparent;
    .vip-alter
       padding-top 30px; background #fff;
       header
         display flex; align-items centere; height 20px;
         span
            display inline-block; width 10px; background #F2F2F2;
         article
            flex 1; height 20px;
            aside
             display flex;align-items center; margin 0 auto;  width 180px;
             a
              position relative; height 20px; flex 1; text-align center; font-size 16px; color #525252;
              span
                position: absolute; top: 23px; right 31px;  display inline-block; min-width 25px; margin 0 auto;border-bottom 2px solid transparent; background transparent;
             a.select
              color #41B962;
              span
                border-color #41B962;
       ul
         padding 0 15px;
         li
           display flex; align-items center; padding-bottom 25px;
           i
             display inline-block; width 40px; height 40px; line-height 40px;  border-radius 50%; text-align center; background #F2F2F2;color #41B962;
           p
             padding-left 9px;
             span
               display block;
             span.privilege
               display inline-block; color: #01acc8;  font-weight bold;  font-size 15px;
</style>
